<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Minimal 1.0 - Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8"/>

    <!-- Bootstrap -->
    <link href="assets/css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="/assets/css/vendor/animate/animate.min.css">
    <link type="text/css" rel="stylesheet" media="all" href="/assets/js/vendor/mmenu/css/jquery.mmenu.all.css"/>
    <link rel="stylesheet" href="/assets/js/vendor/videobackground/css/jquery.videobackground.css">
    <link rel="stylesheet" href="/assets/css/vendor/bootstrap-checkbox.css">

    <link rel="stylesheet" href="/assets/js/vendor/rickshaw/css/rickshaw.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/morris/css/morris.css">
    <link rel="stylesheet" href="/assets/js/vendor/tabdrop/css/tabdrop.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote.css">
    <link rel="stylesheet" href="/assets/js/vendor/summernote/css/summernote-bs3.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen.min.css">
    <link rel="stylesheet" href="/assets/js/vendor/chosen/css/chosen-bootstrap.css">

    <link href="assets/css/minimal.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script src="/command/echarts/echarts.min.js"></script>
    <script src="/command/echarts/echarts.js"></script>
    <script src="/command/echarts/echarts-gl.js"></script>
    <script src="/command/echarts-wordcloud.min.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/assets/js/vendor/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/mmenu/js/jquery.mmenu.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/nicescroll/jquery.nicescroll.min.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/animate-numbers/jquery.animateNumbers.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/videobackground/jquery.videobackground.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/blockui/jquery.blockUI.js"></script>

    <script src="/assets/js/vendor/flot/jquery.flot.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.time.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.selection.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.animator.min.js"></script>
    <script src="/assets/js/vendor/flot/jquery.flot.orderBars.js"></script>
    <script src="/assets/js/vendor/easypiechart/jquery.easypiechart.min.js"></script>

    <script src="/assets/js/vendor/rickshaw/raphael-min.js"></script>
    <script src="/assets/js/vendor/rickshaw/d3.v2.js"></script>
    <script src="/assets/js/vendor/rickshaw/rickshaw.min.js"></script>

    <script src="/assets/js/vendor/morris/morris.min.js"></script>

    <script src="/assets/js/vendor/tabdrop/bootstrap-tabdrop.min.js"></script>

    <script src="/assets/js/vendor/summernote/summernote.min.js"></script>

    <script src="/assets/js/vendor/chosen/chosen.jquery.min.js"></script>

    <script src="/assets/js/minimal.min.js"></script>




</head>
<body class="bg-1">


<!-- Preloader -->
<div class="mask">
    <div id="loader"></div>
</div>
<!--/Preloader -->

<!-- Wrap all page content here -->
<div id="wrap">


    <!-- Make page fluid -->
    <div class="row">


        <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top navbar-transparent-black mm-fixed-top" role="navigation"
             id="navbar">


            <!-- Branding -->
            <div class="navbar-header col-md-2">
                <a class="navbar-brand" href="index.html">
                    <strong>MIN</strong>IMAL
                </a>
                <div class="sidebar-collapse">
                    <a href="#">
                        <i class="fa fa-bars"></i>
                    </a>
                </div>
            </div>
            <!-- Branding end -->


            <!-- .nav-collapse -->
            <div class="navbar-collapse">

                <!-- Page refresh -->
                <ul class="nav navbar-nav refresh">
                    <li class="divided">
                        <a href="#" class="page-refresh"><i class="fa fa-refresh"></i></a>
                    </li>
                </ul>
                <!-- /Page refresh -->

                <!-- Search -->
                <div class="search" id="main-search">
                    <i class="fa fa-search"></i> <input type="text" placeholder="Search...">
                </div>
                <!-- Search end -->

                <!-- Quick Actions -->
                <ul class="nav navbar-nav quick-actions">

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-tasks"></i>
                            <span class="label label-transparent-black">2</span>
                        </a>

                        <ul class="dropdown-menu wide arrow nopadding bordered">
                            <li><h1>You have <strong>2</strong> new tasks</h1></li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Layout</div>
                                        <div class="percent">80%</div>
                                    </div>
                                    <div class="progress progress-striped progress-thin">
                                        <div class="progress-bar progress-bar-green" role="progressbar"
                                             aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 80%">
                                            <span class="sr-only">40% Complete (success)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Schemes</div>
                                        <div class="percent">15%</div>
                                    </div>
                                    <div class="progress progress-striped active progress-thin">
                                        <div class="progress-bar progress-bar-cyan" role="progressbar"
                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 15%">
                                            <span class="sr-only">45% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Forms</div>
                                        <div class="percent">5%</div>
                                    </div>
                                    <div class="progress progress-striped progress-thin">
                                        <div class="progress-bar progress-bar-orange" role="progressbar"
                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 5%">
                                            <span class="sr-only">5% Complete (warning)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">JavaScript</div>
                                        <div class="percent">30%</div>
                                    </div>
                                    <div class="progress progress-striped progress-thin">
                                        <div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="45"
                                             aria-valuemin="0" aria-valuemax="100" style="width: 30%">
                                            <span class="sr-only">30% Complete (danger)</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="task-info">
                                        <div class="desc">Dropdowns</div>
                                        <div class="percent">60%</div>
                                    </div>
                                    <div class="progress progress-striped progress-thin">
                                        <div class="progress-bar progress-bar-amethyst" role="progressbar"
                                             aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 60%">
                                            <span class="sr-only">60% Complete</span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li><a href="#">Check all tasks <i class="fa fa-angle-right"></i></a></li>
                        </ul>

                    </li>

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-envelope"></i>
                            <span class="label label-transparent-black">1</span>
                        </a>

                        <ul class="dropdown-menu wider arrow nopadding messages">
                            <li><h1>You have <strong>1</strong> new message</h1></li>
                            <li>
                                <a class="cyan" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/ici-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Ing. Imrich Kamarel</span>
                                        <span class="time">12 mins</span>
                                        <div class="message-content">Duis aute irure dolor in reprehenderit in voluptate
                                            velit esse cillum
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="green" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/arnold-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Arnold Karlsberg</span>
                                        <span class="time">1 hour</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/profile-photo.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">John Douey</span>
                                        <span class="time">3 hours</span>
                                        <div class="message-content">Excepteur sint occaecat cupidatat non proident,
                                            sunt in culpa qui officia
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="red" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/peter-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">Peter Kay</span>
                                        <span class="time">5 hours</span>
                                        <div class="message-content">Ut enim ad minim veniam, quis nostrud
                                            exercitation
                                        </div>
                                    </div>
                                </a>
                            </li>

                            <li>
                                <a class="orange" href="#">
                                    <div class="profile-photo">
                                        <img src="assets/images/george-avatar.jpg" alt/>
                                    </div>
                                    <div class="message-info">
                                        <span class="sender">George McCain</span>
                                        <span class="time">6 hours</span>
                                        <div class="message-content">Lorem ipsum dolor sit amet, consectetur adipisicing
                                            elit
                                        </div>
                                    </div>
                                </a>
                            </li>


                            <li class="topborder"><a href="#">Check all messages <i class="fa fa-angle-right"></i></a>
                            </li>
                        </ul>

                    </li>

                    <li class="dropdown divided">

                        <a class="dropdown-toggle button" data-toggle="dropdown" href="#">
                            <i class="fa fa-bell"></i>
                            <span class="label label-transparent-black">3</span>
                        </a>

                        <ul class="dropdown-menu wide arrow nopadding bordered">
                            <li><h1>You have <strong>3</strong> new notifications</h1></li>

                            <li>
                                <a href="#">
                                    <span class="label label-green"><i class="fa fa-user"></i></span>
                                    New user registered.
                                    <span class="small">18 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-red"><i class="fa fa-power-off"></i></span>
                                    Server down.
                                    <span class="small">27 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-orange"><i class="fa fa-plus"></i></span>
                                    New order.
                                    <span class="small">36 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-cyan"><i class="fa fa-power-off"></i></span>
                                    Server restared.
                                    <span class="small">45 mins</span>
                                </a>
                            </li>

                            <li>
                                <a href="#">
                                    <span class="label label-amethyst"><i class="fa fa-power-off"></i></span>
                                    Server started.
                                    <span class="small">50 mins</span>
                                </a>
                            </li>

                            <li><a href="#">Check all notifications <i class="fa fa-angle-right"></i></a></li>
                        </ul>

                    </li>

                    <li class="dropdown divided user" id="current-user">
                        <div id="image" class="profile-photo">

                        </div>
                        <a class="dropdown-toggle options" data-toggle="dropdown" href="#">
                            <span id="username"></span> <i class="fa fa-caret-down"></i>
                        </a>

                        <ul class="dropdown-menu arrow settings">

                            <li>

                                <h3>Backgrounds:</h3>
                                <ul id="color-schemes">
                                    <li><a href="#" class="bg-1"></a></li>
                                    <li><a href="#" class="bg-2"></a></li>
                                    <li><a href="#" class="bg-3"></a></li>
                                    <li><a href="#" class="bg-4"></a></li>
                                    <li><a href="#" class="bg-5"></a></li>
                                    <li><a href="#" class="bg-6"></a></li>
                                </ul>

                                <div class="form-group videobg-check">
                                    <label class="col-xs-8 control-label">Video BG</label>
                                    <div class="col-xs-4 control-label">
                                        <div class="onoffswitch greensea small">
                                            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                                   id="videobg-check">
                                            <label class="onoffswitch-label" for="videobg-check">
                                                <span class="onoffswitch-inner"></span>
                                                <span class="onoffswitch-switch"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>

                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="#"><i class="fa fa-user"></i> Profile</a>
                            </li>

                            <li>
                                <a href="#"><i class="fa fa-calendar"></i> Calendar</a>
                            </li>

                            <li>
                                <a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge badge-red"
                                                                                       id="user-inbox">3</span></a>
                            </li>

                            <li class="divider"></li>

                            <li>
                                <a href="/logout"><i class="fa fa-power-off"></i> Logout</a>
                            </li>
                        </ul>
                    </li>

                    <li>
                        <a href="#mmenu"><i class="fa fa-comments"></i></a>
                    </li>
                </ul>
                <!-- /Quick Actions -->


                <!-- Sidebar -->
                <ul class="nav navbar-nav side-nav" id="sidebar">

                    <li class="collapsed-content">
                        <ul>
                            <li class="search"><!-- Collapsed search pasting here at 768px --></li>
                        </ul>
                    </li>

                    <li class="navigation" id="navigation">
                        <a href="#" class="sidebar-toggle" data-toggle="#navigation">Navigation <i
                                class="fa fa-angle-up"></i></a>

                        <ul class="menu">

                            <li class="active">
                                <a href="index.html">
                                    <i class="fa fa-tachometer"></i> Dashboard
                                    <span class="badge badge-red">1</span>
                                </a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-list"></i> 排行榜 <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a th:href="@{'/appsList/1&'}">
                                            <i class="fa fa-caret-right"></i> 应用程序
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gamelist/1'}">
                                            <i class="fa fa-caret-right"></i> 游戏
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/gzhlist/1'}">
                                            <i class="fa fa-caret-right"></i> 微信公众号
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/livenesslist'}">
                                            <i class="fa fa-caret-right"></i> 应用活跃度
                                        </a>
                                    </li>
                                    <li>
                                        <a th:href="@{'/overseaslist'}">
                                            <i class="fa fa-caret-right"></i> 海外应用
                                        </a>
                                    </li>
                                </ul>
                            </li>


                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-list"></i> Forms <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="form-elements.html">
                                            <i class="fa fa-caret-right"></i> Common Elements
                                        </a>
                                    </li>
                                    <li>
                                        <a href="validation-elements.html">
                                            <i class="fa fa-caret-right"></i> Validation
                                        </a>
                                    </li>
                                    <li>
                                        <a href="form-wizard.html">
                                            <i class="fa fa-caret-right"></i> Form Wizard
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-pencil"></i> Interface <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="ui-elements.html">
                                            <i class="fa fa-caret-right"></i> UI Elements
                                        </a>
                                    </li>
                                    <li>
                                        <a href="typography.html">
                                            <i class="fa fa-caret-right"></i> Typography
                                        </a>
                                    </li>
                                    <li>
                                        <a href="tiles.html">
                                            <i class="fa fa-caret-right"></i> Tiles
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="buttons.html">
                                    <i class="fa fa-tint"></i> Buttons & Icons
                                </a>
                            </li>
                            <li>
                                <a href="grid.html">
                                    <i class="fa fa-th"></i> Grid Layout
                                </a>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-th-large"></i> Tables <b class="fa fa-plus dropdown-plus"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="tables.html">
                                            <i class="fa fa-caret-right"></i> Bootstrap Tables
                                        </a>
                                    </li>
                                    <li>
                                        <a href="datatables.html">
                                            <i class="fa fa-caret-right"></i> DataTables
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa fa-desktop"></i> Example Pages <b class="fa fa-plus dropdown-plus"></b>
                                    <span class="label label-greensea">mails</span>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="login.html">
                                            <i class="fa fa-caret-right"></i> Login Page
                                        </a>
                                    </li>
                                    <li>
                                        <a href="calendar.html">
                                            <i class="fa fa-caret-right"></i> Calendar
                                        </a>
                                    </li>
                                    <li>
                                        <a href="page404.html">
                                            <i class="fa fa-caret-right"></i> Page 404
                                        </a>
                                    </li>
                                    <li>
                                        <a href="page500.html">
                                            <i class="fa fa-caret-right"></i> Page 500
                                        </a>
                                    </li>
                                    <li>
                                        <a href="page-offline.html">
                                            <i class="fa fa-caret-right"></i> Page Offline
                                        </a>
                                    </li>
                                    <li>
                                        <a href="gallery.html">
                                            <i class="fa fa-caret-right"></i> Gallery
                                        </a>
                                    </li>
                                    <li>
                                        <a href="timeline.html">
                                            <i class="fa fa-caret-right"></i> Timeline
                                        </a>
                                    </li>
                                    <li>
                                        <a href="mail.html">
                                            <i class="fa fa-caret-right"></i> Vertical Mail
                                            <span class="badge badge-red">5</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="mail-horizontal.html">
                                            <i class="fa fa-caret-right"></i> Horizontal Mail
                                            <span class="label label-greensea">mails</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="vector-maps.html">
                                            <i class="fa fa-caret-right"></i> Vector Maps
                                        </a>
                                    </li>
                                    <li>
                                        <a href="google-maps.html">
                                            <i class="fa fa-caret-right"></i> Google Maps
                                        </a>
                                    </li>
                                </ul>
                            </li>

                            <li>
                                <a href="widgets.html">
                                    <i class="fa fa-play-circle"></i> Widgets
                                </a>
                            </li>

                            <li>
                                <a href="charts.html">
                                    <i class="fa fa-bar-chart-o"></i> Charts & Graphs
                                </a>
                            </li>


                        </ul>

                    </li>

                    <li class="summary" id="order-summary">
                        <a href="#" class="sidebar-toggle underline" data-toggle="#order-summary">Orders Summary <i
                                class="fa fa-angle-up"></i></a>

                        <div class="media">
                            <a class="pull-right" href="#">
                                <span id="sales-chart"></span>
                            </a>
                            <div class="media-body">
                                This week sales
                                <h3 class="media-heading">26, 149</h3>
                            </div>
                        </div>

                        <div class="media">
                            <a class="pull-right" href="#">
                                <span id="balance-chart"></span>
                            </a>
                            <div class="media-body">
                                This week balance
                                <h3 class="media-heading">318, 651</h3>
                            </div>
                        </div>

                    </li>

                    <li class="settings" id="general-settings">
                        <a href="#" class="sidebar-toggle underline" data-toggle="#general-settings">General Settings <i
                                class="fa fa-angle-up"></i></a>

                        <div class="form-group">
                            <label class="col-xs-8 control-label">Switch ON</label>
                            <div class="col-xs-4 control-label">
                                <div class="onoffswitch greensea">
                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                           id="switch-on" checked="">
                                    <label class="onoffswitch-label" for="switch-on">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-8 control-label">Switch OFF</label>
                            <div class="col-xs-4 control-label">
                                <div class="onoffswitch greensea">
                                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                           id="switch-off">
                                    <label class="onoffswitch-label" for="switch-off">
                                        <span class="onoffswitch-inner"></span>
                                        <span class="onoffswitch-switch"></span>
                                    </label>
                                </div>
                            </div>
                        </div>

                    </li>


                </ul>
                <!-- Sidebar end -->


            </div>
            <!--/.nav-collapse -->


        </div>
        <!-- Fixed navbar end -->


        <!-- Page content -->
        <div id="content" class="col-md-12">


            <!-- page header -->
            <div class="pageheader">


                <h2><i class="fa fa-tachometer"></i> Dashboard
                    <span>// Place subtitle here...</span></h2>


                <div class="breadcrumbs">
                    <ol class="breadcrumb">
                        <li>You are here</li>
                        <li><a href="index.html">Minimal</a></li>
                        <li class="active">Dashboard</li>
                    </ol>
                </div>


            </div>
            <!-- /page header -->


            <!-- content main container -->
            <div class="main">
                <div class="row" style="width: 3500px;height: 850px ;">

                    <!--以下oversea-->
                    <!--                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
                    <!--                        <section class="tile color transparent-black textured">-->
                    <!--                            <div class="tile-header">-->
                    <!--                                <h1><strong>Server</strong> Load</h1>-->
                    <!--                                <div class="controls">-->
                    <!--                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>-->
                    <!--                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            <div class="tile-body paddingtop">-->
                    <!--                                <div id = "oversea1" style="height: 200px;"></div>-->
                    <!--                            </div>-->
                    <!--                        </section>-->
                    <!--                    </div>-->

                    <!--                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
                    <!--                        <section class="tile color transparent-black">-->
                    <!--                            <div class="tile-header">-->
                    <!--                                <h1><strong>Browser</strong> Usage</h1>-->
                    <!--                                <div class="controls">-->
                    <!--                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>-->
                    <!--                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>-->
                    <!--                                </div>-->
                    <!--                            </div>-->
                    <!--                            <div class="tile-body">-->
                    <!--                                <div id="oversea2" style="height: 200px;" class="morris-chart"></div>-->
                    <!--                            </div>-->
                    <!--                        </section>-->
                    <!--                    </div>-->

                    <!--liveness-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">


                        <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h1><strong>公众号数量统计</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="gzh1" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>


                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h1><strong>公众号类别比重</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="gzh2" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>
                        <!--游戏pie图-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h3><strong>游戏发行商</strong></h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="game1" style="height: 400px;"></div>
                                </div>
                            </section>
                        </div>

                    </div>
                    <!--第一列-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <section class="tile color transparent-black textured">
                            <div class="tile-header">
                                <h1><strong>应用标签</strong></h1>
                                <div class="controls">
                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="tile-body paddingtop">
                                <div id="app1" style="height: 800px;"></div>
                            </div>
                        </section>
                    </div>


                    <!--3d-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                        <section class="tile color transparent-black">
                            <div class="tile-header">
                                <h3><strong>每个类型前十名游戏评分</strong></h3>
                                <div class="controls">
                                    <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                    <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                </div>
                            </div>
                            <div class="tile-body">
                                <div id="game2" style="height: 800px;" class="morris-chart"></div>
                            </div>
                        </section>
                    </div>


                    <!--以下第三-->
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">


                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <section class="tile color transparent-black textured">
                                <div class="tile-header">
                                    <h3>应用活跃度排名</h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body paddingtop">
                                    <div id="liveness1" style="height: 300px;"></div>
                                </div>
                            </section>
                        </div>


                        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h3>前5大应用占比</h3>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="liveness2" style="height: 300px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>


                        <!--开发者数据-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <section class="tile color transparent-black">
                                <div class="tile-header">
                                    <h1><strong>开发者数据</strong></h1>
                                    <div class="controls">
                                        <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
                                        <a href="#" class="remove"><i class="fa fa-times"></i></a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <div id="app2" style="height: 400px;" class="morris-chart"></div>
                                </div>
                            </section>
                        </div>

                    </div>
                    <!--第二列-->


                </div>
                <div class="row">
                    <div class="col-md-6">
                        <section class="tile transparent recent-activity">
                        </section>
                    </div>
                    <div class="col-md-6">
                    </div>
                </div>

            </div>
            <!-- /content container -->


        </div>
        <!-- Page content end -->


        <div id="mmenu" class="right-panel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#mmenu-users" data-toggle="tab"><i class="fa fa-users"></i></a></li>
                <li class=""><a href="#mmenu-history" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
                <li class=""><a href="#mmenu-friends" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
                <li class=""><a href="#mmenu-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div class="tab-pane active" id="mmenu-users">
                    <h5><strong>Online</strong> Users</h5>

                    <ul class="users-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kosice, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/george-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">George <strong>McCain</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Prague, Czech Republic</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar2.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Jesse <strong>Phoenix</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Berlin, Germany</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                    <h5><strong>Offline</strong> Users</h5>

                    <ul class="users-list">

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar4.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Dell <strong>MacApple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Paris, France</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar5.jpg" alt>
                                </a>

                                <div class="media-body">
                                    <h6 class="media-heading">Roger <strong>Flopple</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Rome, Italia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar6.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Nico <strong>Vulture</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Kyjev, Ukraine</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar7.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Bobby <strong>Socks</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Moscow, Russia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-history">
                    <h5><strong>Chat</strong> History</h5>

                    <ul class="history-list">

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                        tempor</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                                        eu fugiat nulla pariatur</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/peter-avatar.jpg" alt>

                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Peter <strong>Kay</strong></h6>
                                    <small>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                        deserunt mollit </small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div>

                <div class="tab-pane" id="mmenu-friends">
                    <h5><strong>Friends</strong> List</h5>
                    <ul class="favourite-list">

                        <li class="online">
                            <div class="media">

                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/arnold-avatar.jpg" alt>
                                </a>
                                <span class="badge badge-red unread">3</span>

                                <div class="media-body">
                                    <h6 class="media-heading">Arnold <strong>Karlsberg</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Bratislava, Slovakia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>

                            </div>
                        </li>

                        <li class="offline">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar8.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Anna <strong>Opichia</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Budapest, Hungary</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="busy">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/random-avatar1.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Lucius <strong>Cashmere</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Wien, Austria</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                        <li class="online">
                            <div class="media">
                                <a class="pull-left profile-photo" href="#">
                                    <img class="media-object" src="assets/images/ici-avatar.jpg" alt>
                                </a>
                                <div class="media-body">
                                    <h6 class="media-heading">Ing. Imrich <strong>Kamarel</strong></h6>
                                    <small><i class="fa fa-map-marker"></i> Ulaanbaatar, Mongolia</small>
                                    <span class="badge badge-outline status"></span>
                                </div>
                            </div>
                        </li>

                    </ul>
                </div>

                <div class="tab-pane pane-settings" id="mmenu-settings">
                    <h5><strong>Chat</strong> Settings</h5>

                    <ul class="settings">

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">Show Offline Users</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-offline" checked="">
                                        <label class="onoffswitch-label" for="show-offline">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">Show Fullname</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-fullname">
                                        <label class="onoffswitch-label" for="show-fullname">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">History Enable</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-history" checked="">
                                        <label class="onoffswitch-label" for="show-history">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">Show Locations</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-location" checked="">
                                        <label class="onoffswitch-label" for="show-location">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">Notifications</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-notifications">
                                        <label class="onoffswitch-label" for="show-notifications">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="form-group">
                                <label class="col-xs-8 control-label">Show Undread Count</label>
                                <div class="col-xs-4 control-label">
                                    <div class="onoffswitch greensea">
                                        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
                                               id="show-unread" checked="">
                                        <label class="onoffswitch-label" for="show-unread">
                                            <span class="onoffswitch-inner"></span>
                                            <span class="onoffswitch-switch"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>

                </div><!-- tab-pane -->

            </div><!-- tab-content -->
        </div>


    </div>
    <!-- Make page fluid-->


</div>
<!-- Wrap all page content end -->


<section class="videocontent" id="video"></section>

<script>
    //判断用户登录
    let flag = sessionStorage.getItem("username");
    if (flag === null) {
        alert("未登录!");
        window.location.href = "/login";
    }

    function skip() {
        window.location.href = "/userinfo/" + sessionStorage.getItem("username");
    }

    //显示用户头像
    let pic = sessionStorage.getItem("pic");
    let img = document.createElement("img");
    img.src = "data:image/jpeg;base64," + pic;
    img.width = 45;
    img.height = 45;
    $("#image").html(img);
    $("#username").text(sessionStorage.getItem("username"));

    // 基于准备好的dom，初始化echarts实例
    let appview1 = echarts.init(document.getElementById('app1'));
    let gameview1 = echarts.init(document.getElementById('game1'));
    let gzhview1 = echarts.init(document.getElementById('gzh1'));
    let liveview1 = echarts.init(document.getElementById('liveness1'));
    // let overseaview1 = echarts.init(document.getElementById('oversea1'));
    let appview2 = echarts.init(document.getElementById('app2'));
    let gameview2 = echarts.init(document.getElementById('game2'));
    let gzhview2 = echarts.init(document.getElementById('gzh2'));
    let liveview2 = echarts.init(document.getElementById('liveness2'));
    // let overseaview2 = echarts.init(document.getElementById('oversea2'));

    let webSocket = null;
    if ("WebSocket" in window) {
        webSocket = new WebSocket("ws://localhost:8080/websocket");
    } else {
        alert("浏览器不支持webSocket！");
    }

    webSocket.onopen = function () {
        console.log("连接成功");
    };
    //刷新div

    webSocket.onmessage = function (event) {
        let obj = JSON.parse(event.data);

        let type = obj.type;

        //测试
        console.log(sessionStorage.getItem(sessionStorage.getItem("username")));
        let tokendata = obj.tokendata;
        console.log(tokendata);
        for (let i = 0; i < tokendata.length; i++) {
            if (tokendata[i].username === sessionStorage.getItem("username"))
                if (tokendata[i].token !== sessionStorage.getItem(sessionStorage.getItem("username"))) {
                    alert("用户已在异地登录，请重新登录!");
                    window.location.href = "/login";
                }
        }


        //console.log(type[0].type);
        //以下为各个模块的内容

        switch (type[0].type) {
            case "apps":
                appEc(obj);
                //console.log("apps");
                break;
            case "game":
                gameEc(obj);
                break;
            case "gzh":
                gzhEc(obj);
                break;
            case "live":
                liveEc(obj);
                break;
            case "oversea":
                oversea(obj);
                break;
        }


    };

    function appEc(obj) {
        //app1

        let tagsData = obj.app1;

        let appoption1 = {
            tooltip: {
                show: true
            },
            series: [{
                type: "wordCloud",
                gridSize: 6,
                shape: 'diamond',
                sizeRange: [12, 50],
                width: 800,
                height: 500,
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                data: tagsData
            }]
        };

        //app2

        let appData2 = {
            name: [],
            timeData: [],
            scorenum: [],
            follow: [],
            downloads: [],
            appnum: [],
            score: []
        };

        let appobj2 = obj.app2;

        for (let i = 0; i < appobj2.length; i++) {
            appData2.name.push(appobj2[i].name);
            appData2.timeData.push(i);
            appData2.scorenum.push(appobj2[i].scorenum);
            appData2.follow.push(appobj2[i].follow);
            appData2.downloads.push(appobj2[i].downloads);
            appData2.appnum.push(appobj2[i].appnum);
            appData2.score.push(appobj2[i].score);
        }

        let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

        let appoption2 = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'cross'},
                formatter: function (params, ticket, callback) {
                    let index = params[0].dataIndex;
                    let Htm = `${appData2.name[index]}<br>
                    下载量:${appData2.downloads[index]}万<br>
                    应用数:${appData2.appnum[index]}个<br>
                    评分人数:${appData2.follow[index]}<br>
                    平均评分:${appData2.score[index]}`
                    return Htm;
                }
            },
            grid: {
                top: '20%',
                bottom: '30%',
                left: '14%',
                right: '8%'
            },
            dataZoom: {
                bottom: '14%',
                height: '30',
                dataBackground: {
                    lineStyle: {color: '#39977D'},
                    areaStyle: {color: 'rgba(57,151,125,1)'}
                },
                borderColor: 'rgba(57,151,125,0.2)',
                textStyle: {color: '#39977D'},
                start: 0,
                end: 100,
                xAxisIndex: [0, 1, 2, 3]
            },
            xAxis: [{
                name: '总关注',
                type: 'category',
                position: 'bottom',
                offset: 8,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000000',
                        fontSize: 14,
                        backgroundColor: '#FFE282',
                        lineHeight: 20,
                        padding: [3, 3]
                    },
                    interval: 0
                },
                nameTextStyle: {color: '#585858', padding: [0, 0, -100]},
                nameLocation: 'start',
                data: appData2.follow
            },
                {
                    name: '评分人数',
                    type: 'category',
                    position: 'bottom',
                    offset: 40,
                    axisTick: {show: false},
                    axisLine: {show: false},

                    nameTextStyle: {color: '#585858', padding: [0, 0, -38]},
                    nameLocation: 'start',
                    data: appData2.scorenum
                },
                {
                    type: 'category',
                    axisLine: {show: false},
                },
                {
                    type: 'category',
                    position: 'bottom',
                    offset: 80,
                    axisTick: {alignWithLabel: true, textStyle: {color: '#707070'}},
                    data: appData2.timeData
                }
            ],
            yAxis: [{
                type: 'value',
                name: '下载量',
                scale: true,
                position: 'left',
                offset: 54,
                axisTick: {lineStyle: {color: colors[0]}, inside: true},
                nameTextStyle: {color: colors[0]},
                axisLabel: {color: colors[0]},
                splitLine: {show: false}
            },
                {
                    type: 'value',
                    name: '应用数',
                    position: 'left',
                    axisTick: {lineStyle: {color: colors[1]}, inside: true},
                    nameTextStyle: {color: colors[1]},
                    axisLabel: {color: colors[1]},
                    splitLine: {show: false}
                },
                {
                    type: 'value',
                    name: '平均评分',
                    scale: true,
                    position: 'right',
                    axisTick: {lineStyle: {color: colors[2]}, inside: true},
                    nameTextStyle: {color: colors[2]},
                    axisLabel: {color: colors[2]},
                    splitLine: {show: false}
                }
            ],
            series: [{
                name: '下载量',
                type: 'line',
                step: false,
                label: {normal: {show: true, position: 'top'}},
                data: appData2.downloads
            },
                {
                    name: '应用数',
                    type: 'bar',
                    yAxisIndex: 1,
                    color: '#bee6b2',
                    barWidth: '50%',
                    label: {normal: {show: true, position: 'top'}},
                    data: appData2.appnum
                },
                {
                    name: '平均评分',
                    type: 'line',
                    step: false,
                    yAxisIndex: 2,
                    color: colors[2],
                    label: {normal: {show: true, position: 'top'}},
                    data: appData2.score
                }
            ]
        };


        appview1.setOption(appoption1);
        appview2.setOption(appoption2);
    }

    function gameEc(obj) {
//game1
        let aname = [];
        let anum = [];
        let gameauobj = obj.gameauthor;
        for (let i = 0; i < gameauobj.length; i++) {
            aname.push(gameauobj[i].name);
            anum.push(gameauobj[i].value);
        }
        let gameoption1 = {
            //backgroundColor:"#FFFFFF",
            color: ["#C33531", "#EFE42A", "#64BD3D", "#EE9201", "#29AAE3", "#B74AE5", "#0AAF9F", "#E89589", "#16A085", "#4A235A"],
            grid: {
                margin_top: '10%',
                bottom: '10%',
                margin_left: '10%',
                right: '50%',
                containLabel: false
            },
            tooltip: {
                trigger: 'item',
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                type: "scroll",
                orient: "vartical",
                // x: "right",
                top: "center",
                right: "15",
                // bottom: "0%",
                itemWidth: 16,
                itemHeight: 8,
                itemGap: 16,
                textStyle: {
                    color: '#A3E2F4',
                    fontSize: 12,
                    fontWeight: 0
                },
                data: aname
            },
            polar: {},
            angleAxis: {
                interval: 1,
                type: 'category',
                data: [],
                z: 10,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    color: "#FFFFFF",
                    margin: 8,
                    fontSize: 16
                },
            },
            radiusAxis: {
                min: 40,
                max: 120,
                interval: 20,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 1,
                        type: "solid"
                    },
                },
                axisLabel: {
                    formatter: '{value} %',
                    show: false,
                    padding: [0, 0, 20, 0],
                    color: "#FFFFFF",
                    fontSize: 16
                },
                splitLine: {
                    lineStyle: {
                        color: "#FFFFFF",
                        width: 2,
                        type: "solid"
                    }
                }
            },
            calculable: true,
            series: [{
                type: 'pie',
                radius: ["5%", "10%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#FFFFFF"
                        }
                    }
                }]
            }, {
                type: 'pie',
                radius: ["90%", "95%"],
                hoverAnimation: false,
                labelLine: {
                    normal: {
                        show: false,
                        length: 30,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                name: "",
                data: [{
                    name: '',
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: "#FFFFFF"
                        }
                    }
                }]
            }, {
                stack: 'a',
                type: 'pie',
                radius: ['20%', '80%'],
                roseType: 'area',
                zlevel: 10,
                label: {
                    normal: {
                        show: true,
                        formatter: "{c}",
                        textStyle: {
                            fontSize: 12,
                        },
                        position: 'outside'
                    },
                    emphasis: {
                        show: true
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 55
                    },
                    emphasis: {
                        show: false
                    }
                },
                data: gameauobj
            },]
        };


        //game2
        let scores = [];
        let gamedata = [];
        let gametypeobj = obj.gametypes;
        for (let i = 0; i < gametypeobj.length; i++) {
            scores.push(gametypeobj[i].score);
        }

        for (let i = 0; i < 3; i++) {
            for (let j = 0; j < 10; j++) {
                let array = [];
                array.push(i);
                array.push(j);
                array.push(scores[i * 10 + j]);
                gamedata.push(array);
            }
        }


        let hours = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
        let days = ['动作', '角色扮演', '策略'];
        let gameoption2 = {
            background: '#000000',
            tooltip: {},
            visualMap: {
                max: 20,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                }
            },
            xAxis3D: {
                type: 'category',
                data: hours
            },
            yAxis3D: {
                type: 'category',
                data: days
            },
            zAxis3D: {
                type: 'value'
            },
            grid3D: {
                boxWidth: 200,
                boxDepth: 80,
                light: {
                    main: {
                        intensity: 1.2
                    },
                    ambient: {
                        intensity: 0.3
                    }
                }
            },
            series: [{
                name: 'game',
                type: 'bar3D',
                data: gamedata.map(function (item) {
                    return {
                        value: [item[1], item[0], item[2]]
                    }
                }),
                shading: 'color',

                label: {
                    show: false,
                    textStyle: {
                        fontSize: 16,
                        borderWidth: 1
                    }
                },

                itemStyle: {
                    opacity: 0.4
                },

                emphasis: {
                    label: {
                        textStyle: {
                            fontSize: 20,
                            color: '#900'
                        }
                    },
                    itemStyle: {
                        color: '#900'
                    }
                }
            }]
        };

        gameview1.setOption(gameoption1);
        gameview2.setOption(gameoption2);
    }

    function gzhEc(obj) {
        //gzh1
        let gzhName = [];
        let gzhnumber = [];
        let gzhobj = obj.gzh;
        for (let i = 0; i < gzhobj.length; i++) {
            gzhName.push(gzhobj[i].name);
            gzhnumber.push(gzhobj[i].value);
        }
        let gzhoption1 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'none'
                },
                formatter: function (params) {
                    return params[0].name + ': ' + params[0].value;
                }
            },
            xAxis: {
                data: gzhName,
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {
                    color: '#e54035'
                }
            },
            yAxis: {
                splitLine: {show: false},
                axisTick: {show: false},
                axisLine: {show: false},
                axisLabel: {show: false}
            },
            color: ['#e54035'],
            series: [{
                name: 'hill',
                type: 'pictorialBar',
                barCategoryGap: '-130%',
                // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                itemStyle: {
                    opacity: 0.5
                },
                emphasis: {
                    itemStyle: {
                        opacity: 1
                    }
                },
                data: gzhnumber,
                z: 10
            }]
        };

        //gzh2
        var rich = {
            white: {
                color: '#ddd',
                align: 'center',
                padding: [5, 0]
            }
        };
        var placeHolderStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
        };
        var hdata = [];
        for (var i = 0; i < gzhName.length; i++) {
            hdata.push({
                value: gzhnumber[i],
                name: gzhName[i],
                itemStyle: {
                    normal: {
                        borderWidth: 5,
                        shadowBlur: 30,
                        borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                            offset: 0,
                            color: '#7777eb'
                        }, {
                            offset: 1,
                            color: '#70ffac'
                        }]),
                        shadowColor: 'rgba(142, 152, 241, 0.6)'
                    }
                }
            }, {
                value: 1,
                name: '',
                itemStyle: placeHolderStyle
            });
        }
        var seriesObj = [{
            name: '',
            type: 'pie',
            clockWise: false,
            radius: [30, 80],
            hoverAnimation: false,
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'outside',
                        color: '#ddd',
                        formatter: function (params) {
                            var percent = 0;
                            var total = 0;
                            for (var j = 0; j < gzhnumber.length; j++) {
                                total += gzhnumber[j];
                            }
                            percent = ((params.value / total) * 100).toFixed(0);
                            if (params.name !== '') {
                                return params.name + '\n{white|' + '占比' + percent + '%}';
                            } else {
                                return '';
                            }
                        },
                        rich: rich
                    },
                    labelLine: {
                        show: false
                    }
                }
            },
            data: hdata
        }];
        let gzhoption2 = {
            tooltip: {
                show: false
            },
            legend: {
                show: false
            },
            toolbox: {
                show: false
            },
            series: seriesObj
        }
        gzhview1.setOption(gzhoption1);
        gzhview2.setOption(gzhoption2);
    }

    function liveEc(obj) {
        //liveness1
        let App = [];
        let Mindex = [];
        let liveobj = obj.liveness1;
        for (let i = 0; i < liveobj.length; i++) {
            App.push(liveobj[i].App);
            Mindex.push(liveobj[i].Mindex);
        }
        // 指定图表的配置项和数据
        let liveoption1 = {
            xAxis: {
                type: 'category',
                data: App
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: Mindex,
                type: 'bar'
            }]
        };

        //liveness2
        let appname = [];
        let echartData = [];
        let liveobj2 = obj.liveness2;
        for (let i = 0; i < liveobj2.length; i++) {
            appname.push(liveobj2[i].App);
            echartData.push(liveobj2[i].Mindex);
        }
        let liveoption2 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: appname
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: echartData
                }
            ]
        };
        liveview1.setOption(liveoption1);
        liveview2.setOption(liveoption2);
    }

    function oversea(obj) {
//oversea1
        // let appname = [];
        // let clickperday= [];
        // let overseaobj=obj.oversea;
        // for (let i=0;i<overseaobj.length;i++){
        //     appname.push(overseaobj[i].appname);
        //     clickperday.push(overseaobj[i].clickperday);
        // }
        // // 指定图表的配置项和数据
        // let overseaoption1 = {
        //     title: {
        //         text: '海外应用日活'
        //     },
        //     tooltip: {},
        //     legend: {
        //         data:['']
        //     },
        //     xAxis: {
        //         data: appname
        //     },
        //     yAxis: {},
        //     series: [{
        //         name: '日指数',
        //         type: 'bar',
        //         data: clickperday
        //     }]
        // };

        //oversea2


        // 使用刚指定的配置项和数据显示图表。
        // overseaview1.setOption(overseaoption1);
        // overseaview2.setOption(overseaoption2);
    }


    //关闭按钮调用函数
    function clo() {
        webSocket.close(3000, "强制关闭");
    }


    window.onbeforeunload = function () {
        clo();
    };


</script>


</body>
</html>

